<%@ page import="java.util.Locale" %>
<%@ page import="java.util.ResourceBundle" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    //通过请求头的accept-language 拿到当前浏览器的地区信息
    String localeStr = request.getParameter("locale");
    Locale locale = null;
    if ("en_US".equals(localeStr)) {
        locale = Locale.US;
    } else if ("zh_CN".equals(localeStr)) {
        locale = Locale.CHINA;
    } else {
        locale = request.getLocale();
    }
    //获取资源包
    ResourceBundle i18n = ResourceBundle.getBundle("i18n", locale);
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%=i18n.getString("register_page")%></title>

    <link rel="icon" href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/favicon.ico">
    <link rel="canonical" href="https://getbootstrap.com/docs/3.4/examples/justified-nav/">

    <!-- Bootstrap core CSS -->
    <link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/dist/css/bootstrap.min.css"
          rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/assets/css/ie10-viewport-bug-workaround.css"
          rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/examples/justified-nav/justified-nav.css"
          rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/assets/js/ie8-responsive-file-warning.js"></script>
    <![endif]-->
    <script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/assets/js/ie-emulation-modes-warning.js"></script>


</head>
<body>
<div style="float: right">
    <a href="./register.jsp?locale=zh_CN">中文</a>
    <a href="./register.jsp?locale=en_US">English</a>
</div>

<div align="center">
    <h1><%=i18n.getString("register_page")%></h1>
</div>
<form class="form-horizontal">
    <div class="form-group">
        <label for="username" class="col-sm-2 control-label"><%=i18n.getString("user_name")%></label>
        <div class="col-sm-9">
            <input type="text" class="form-control" name="username" id="username"/>
        </div>
    </div>
    <div class="form-group">
        <label for="username" class="col-sm-2 control-label"><%=i18n.getString("user_password")%></label>
        <div class="col-sm-9">
            <input type="password" class="form-control" name="password" id="password"/>
        </div>
    </div>
    <div class="form-group">
        <label for="username" class="col-sm-2 control-label"><%=i18n.getString("re_user_password")%></label>
        <div class="col-sm-9">
            <input type="password" class="form-control" name="repassword" id="repassword"/>
        </div>
    </div>
    <div class="form-group">
        <label for="email" class="col-sm-2 control-label"><%=i18n.getString("user_email")%></label>
        <div class="col-sm-9">
            <input type="text" class="form-control" name="email" id="email"/>
        </div>
    </div>
    <div class="form-group">
        <label for="telephone" class="col-sm-2 control-label"><%=i18n.getString("user_phone")%></label>
        <div class="col-sm-9">
            <input type="text" class="form-control" name="telephone" id="telephone"/>
        </div>
    </div>

    <div class="form-group">
        <label for="telephone" class="col-sm-2 control-label"><%=i18n.getString("user_gender")%></label>
        <div class="col-sm-9">
            <label class="radio-inline">
                <input type="radio" name="gender" value="1"> <%=i18n.getString("gender_male")%>
            </label>
            <label class="radio-inline">
                <input type="radio" name="gender" value="0"> <%=i18n.getString("gender_female")%>
            </label>
        </div>
    </div>
    <div class="form-group">
        <label for="telephone" class="col-sm-2 control-label"><%=i18n.getString("user_introduction")%></label>
        <div class="col-sm-9">
            <textarea type="text" class="form-control" name="introduction" id="introduction"></textarea>
        </div>
    </div>
    <div align="center">
        <button type="button" class="btn btn-lg btn-success" id="btn_submit"><%=i18n.getString("submit")%></button>
        <button class="btn btn-lg btn-primary" type="reset"><%=i18n.getString("reset")%></button>
        <a class="btn btn-lg btn-default" href="../index.html"><%=i18n.getString("back")%></a>
    </div>

</form>

<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
        crossorigin="anonymous"></script>
<script>
    window.jQuery || document.write(
        '<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/assets/js/vendor/jquery.min.js"><\/script>'
    )
</script>
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/assets/js/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/sweetalert/2.1.2/sweetalert.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var messageAlert = function (title, text, icon, flag, fun) {
        swal({
            title: title,
            text: text,
            icon: icon,
            button: '<%=i18n.getString("confirm")%>',
        }).then(fun);
        return flag;
    };
    $(function () {
        $('#btn_submit').click(function () {
            var email = $('#email').val();
            var username = $('#username').val();
            var password = $('#password').val();
            var repassword = $('#repassword').val();
            var telephone = $('#telephone').val();
            var gender = $("[name='gender']:radio:checked").val();
            var introduction = $('#introduction').val();
            <!--    1.所有属性不能为空-->
            <!--    2.邮箱地址有效-->
            <!--    3.用户名4-20位-->
            <!--    4.密码4-20位-->
            <!--    5.增加验证码图片以及验证码输入框-->
            //注册信息校验
            //JS正则表达式写法：开头 /^
            //结尾：$/
            //正则表达式对象.test(待测试的字符串)
            var usernamePatt = /^\w{4,20}$/;
            if (!usernamePatt.test(username)) {
                return messageAlert('<%=i18n.getString("error_format")%>', '<%=i18n.getString("error_format_username")%>', "error", false, null);
            }
            if (!usernamePatt.test(password)) {
                return messageAlert('<%=i18n.getString("error_format")%>', '<%=i18n.getString("error_format_password")%>', "error", false, null);
            }
            if (password != repassword) {
                return messageAlert('<%=i18n.getString("error_format")%>', '<%=i18n.getString("error_format_repassword")%>', "error", false, null);
            }
            var emailPatt = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
            if (!emailPatt.test(email)) {
                return messageAlert('<%=i18n.getString("error_format")%>', '<%=i18n.getString("error_format_email")%>', "error", false, null);
            }
            if (gender == null || gender == '') {
                return messageAlert('<%=i18n.getString("error_format")%>', '<%=i18n.getString("error_format_gender")%>', "error", false, null);
            }
            //往后端传输
            //AJAX：异步的JavaScript和XML
            $.ajax({
                //该属性设置ajax方法是否为异步true是异步；false非异步，必须得等该方法执行完以后，再执行后续代码。
                async: true,
                //请求的地址
                url: "./user.do?action=register",
                //请求的类型
                type: "GET",
                //传输的数据类型
                //左边是属性名，右边是属性值；属性名可以不用双引号
                data: {
                    email: email,
                    username: username,
                    password: password,
                    telephone: telephone,
                    gender: gender,
                    introduction: introduction
                },
                //响应成功后的回调函数
                success: function (data) {
                    //响应成功后的回调函数
                    if (data == 1) {
                        messageAlert('<%=i18n.getString("regist_success")%>', '<%=i18n.getString("msg_regist_success")%>', "success", true, function (isOk) {
                            location.href = "../index.html";
                        });
                    } else {
                        return messageAlert('<%=i18n.getString("regist_failed")%>', '<%=i18n.getString("msg_regist_failed")%>', "error", false, null);
                    }
                },
                //响应的数据类型格式
                //text 表示纯文本
                //xml 表示xml数据
                //json 表示JSON对象
                dataType: "text"
            });
        });
    });
</script>
</body>
</html>